<template>
  <div class="quick_map panel-bg">
    <div class="top">
      <div style="display: flex; align-items: center">
        <img src="../../../assets/logo.png" alt="" style="margin-right: 10px" />
        <span style="font-size: larger">场景切换</span>
      </div>
      <!--      <div :class="['tab', { 'tab-active': activeTab.id === tab.id }]" v-for="tab in treeData" :key="tab.id" @click="clickTab(tab)">-->
      <!--        <span>{{ tab.text }}</span>-->
      <!--      </div>-->
      <!--      <div class="xmps-bg" :style="`right: ${activeTabIndex === 0 ? '-95' : activeTabIndex === 1 ? '-185' : '-275'}px`"></div>-->
      <div class="operation">
        <i
          class="el-icon-close"
          style="font-size: 20px; margin-left: 8px; cursor: pointer"
          @click="clickClose"
        ></i>
      </div>
    </div>
    <div class="context-img">
      <div v-for="item in image" :key="item.id" class="img-box">
        <img :src="item.layerTreePath" class="img" @click="imageSelect(item)" />
        <div class="name" :class="item.switch ? 'select' : ''">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({
  name: "QuickMap",
  components: {},
})
export default class QuickMap extends Vue {
  private layers = [
    {
      id: 1,
      name: "兴趣点",
      layerTreePath: "兴趣点",
      switch: false,
    },
    {
      id: 2,
      name: "行政区划",
      layerTreePath: "兴趣点",
      switch: false,
    },
  ];
  private selectLayer = "";

  private image = [
    {
      id: 1,
      name: "倾斜数据",
      layerTreePath: require("../../../assets/logo.png"),
      switch: false,
      layerPath: "倾斜数据",
    },
    {
      id: 2,
      name: "路网",
      layerTreePath: require("../../../assets/logo.png"),
      switch: false,
      layerPath: "路网",
    },
  ];

  imageSelect(item: any) {
    item.switch = !item.switch;
    // MarsModule.mars?.workspace.layerTreeManager.setCheckedByPath(item.layerPath, item.switch);
    // LayerTree.instance.setCheckedByPath(item.layerPath, item.switch);
  }

  clickClose() {
    return true;
  }
}
</script>

<style scoped lang="scss">
.quick_map {
  position: absolute;
  width: 300px;
  height: 180px;

  bottom: 200px;
  left: 380px;
  font-size: 14px;
  color: #fff;
  z-index: 10;
  pointer-events: auto;
  .top {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    // background-color: rgba($color: #000000, $alpha: 0.3);
    padding: 0 20px;
    position: relative;
    overflow: hidden;

    .tab {
      width: 80px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      color: #6ed0ff;
      margin-right: 10px;
      z-index: 10;
      cursor: default;
      transition: all ease 0.3s;
    }

    .tab-active {
      color: #fff;
      background: linear-gradient(
        90deg,
        #2192b8 0%,
        rgba(33, 146, 184, 0) 100%
      );
    }

    .xmps-bg {
      height: 34px;
      position: absolute;
      top: 6px;
      left: 0;
      background: url("../../../assets/logo.png") repeat;
      transition: all ease 0.3s;
      z-index: 5;
      transform: rotateY(180deg);
    }

    .operation {
      position: absolute;
      z-index: 10;
      top: 18px;
      right: 20px;
    }
  }
  .context-img {
    margin: 10px 20px;
    display: flex;
    .img-box {
      width: 120px;
      height: 80px;
      margin: 10px;
      border-color: #6ed0ff;
      border-radius: 5%;
      cursor: pointer;
      .img {
        width: 100%;
        height: 100%;
        display: block;
      }
      .name {
        margin-left: 2px;
        position: absolute;
        top: 115px;
        display: inline;
        width: 103px;
        height: 24px;
        text-align: center;
        background: rgba(#919496, 0.5);
        box-shadow: 0px 0px 3px 0px rgba(189, 191, 196, 0.2);
        border-radius: 0px 0px 10px 10px;
        &.select {
          background: rgba(#348492, 0.7);
        }
      }
    }
  }
  .context-switch {
    margin: 10px 20px;
    .switch {
      width: 260px;
      height: 45px;
      background: rgba(#000, 0.25);
      border-radius: 20px;
      // opacity: 0.25;
      margin: 10px 0px;
      display: flex;
      justify-content: space-between;
      line-height: 40px;
      padding: 0 20px;
      .layer-name {
        display: inline;
        color: #ffffff;
        // margin-left: 20px;
      }
      /* .layer-switch {
        // margin-right: 20px;
      } */
    }
  }
  .context {
    display: flexbox;
    width: 80%;
    height: 80%;
    margin-left: 25px;
    margin-top: 15px;
    .layer {
      display: inline-flex;
      height: 32px;
      background: rgba(255, 255, 255, 0.1);
      box-shadow: 0px 0px 3px 0px rgba(55, 63, 77, 0.2);
      border-radius: 16px;
      padding: 8px 15px;
      margin: 4px;
      .layer-name {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 20px;
      }
      &.select {
        background: rgba(255, 255, 255, 1);
      }
    }
  }
}
</style>
